<template>
	<view class="notice">
		<view class="wrapper">
			<view class="left-notice">
				<uni-icons type="sound-filled" size="20" color="#2ad4ae"></uni-icons>公告
			</view>
			<view class="center-notice">
				<swiper class="noticeTitle" autoplay :interval="1500" :duration="500" circular vertical>
					<swiper-item class="titleItem" v-for="item of notice" :key="item._id">{{item.title}}</swiper-item>
				</swiper>
			</view>
			<view class="right-notice">
				<uni-icons type="forward" size="20" color="#2ad4ae"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getNoticeApi
	} from '@/Api/index/indexLayOut.js'

	import {
		ref
	} from 'vue'

	//定义公告内容
	const notice = ref([])

	//获取公告内容
	async function getNotice() {
		const res = await getNoticeApi()
		notice.value = res.data
		console.log("公告数据获取")
	}
	getNotice()
	
	//暴露出组件变量、函数等
	defineExpose({
		getNotice
	})
</script>

<style lang="scss" scoped>
	@mixin flexCenter {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.notice {
		margin-top: 30rpx;
		height: 80rpx;
		padding: 0 25rpx;

		.wrapper {
			background-color: #f9f9f9;
			width: 700rpx;
			height: 100%;
			border-radius: 40rpx;
			@include flexCenter();

			.left-notice {
				width: 145rpx;
				height: 100%;
				font-size: 20rpx;
				color: #2c9d78;
				@include flexCenter();
			}

			.center-notice {
				width: 480rpx;
				height: 100%;
				@include flexCenter();

				.noticeTitle {
					width: 100%;
					height: 100%;

					.titleItem {
						height: 100%;
						line-height: 80rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						font-size: 30rpx
					}
				}
			}

			.right-notice {
				width: 70rpx;
				height: 100%;
				@include flexCenter();
			}
		}
	}
</style>